<template>
	<view>

		<uni-row class="demo-uni-row">
			<uni-col :span="5">
				<view>
					<v-tabs @change="changetab" ref="vTab" v-model="current" :tabs="tabs" pills :fixed="false"
						style="border-top: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;" pillsBorderRadius='0rpx'
						pillsColor='#fff' activeColor='#2979ff' bgColor="#fff" :zIndex=0 :line-animation="false">
					</v-tabs>
				</view>
			</uni-col>
			<uni-col :span="19">
				<view class="selected-task">
					<uni-forms-item label="生产单元 :" labelWidth="80">
						<zxz-uni-data-select v-model="workCenter" collapseTags style="width: 300px;" dataKey="manuName"
							dataValue="manuCode" :localdata="workCenterList" @change="onSelectTask" multiple>
						</zxz-uni-data-select>
					</uni-forms-item>
				</view>
			</uni-col>
		</uni-row>

		<uni-row class="demo-uni-row">
			<view v-if="current ===0" :style="{ height: viewportHeight+'px'}" style="width :99%; margin-left:0.5%">
				<zb-table :columns="column1" :stripe="true" :border="true" :data="table1" @dele="dele" @custom="LookPic"
					:cell-style="cellStyle" @cellClick="cellClick" @edit="EditButton1" @notes="getnotes"></zb-table>
			</view>
			<view v-if="current ===1" :style="{ height: viewportHeight+'px' }" style="width :99%; margin-left:0.5%">
				<zb-table :columns="column2" :stripe="true" :border="true" :data="table2" @dele="dele" @custom="LookPic"
					:cell-style="cellStyle" @cellClick="cellClick" @edit="EditButton2" @notes="getnotes"></zb-table>
			</view>
		</uni-row>
		<uni-popup ref="inputDialog1" type="dialog">
			<uni-popup-dialog ref="inputClose" type="info" title="工艺路线" :showClose="false" confirmText="关闭"
				@confirm="dialogInputConfirmClose" :style="{width:viewWidth+'px'}">
				<view :style="{ height: viewHeight+'px' }">
					<zb-table :columns="column3" :stripe="true" :border="true" :data="table3"></zb-table>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" title="异常" :before-close="true" @confirm="dialogInputConfirm"
				@close="dialogInputConfirmClose">
				<view v-if="title!=='备注'">{{row.mo}}工单是否恢复？</view>
				<view v-if="title==='备注'"><uni-easyinput type="textarea" autoHeight style="width: 40vh" v-model="remark"
						placeholder="请输入备注" /></view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialogs" type="dialog">
			<uni-popup-dialog ref="inputClose" title="备注" :before-close="true" @confirm="InputConfirm"
				@close="InputConfirmClose">
				<view class="example-body">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="planForm.dpDate" />
					<zxz-uni-data-select style="margin-top: 5px;" v-model="planForm.reasonTypeCode" placeholder="原因类型"
						dataKey="dictName" dataValue="dictCode" :localdata="reasonTypeList"></zxz-uni-data-select>
					<zxz-uni-data-select style="margin-top: 5px;" v-model="planForm.personResponsible" placeholder="责任人"
						dataKey="patyName" dataValue="patyCode" :localdata="peopleList" :filterable="true"
						@inputChange="handleInput"></zxz-uni-data-select>
					<uni-easyinput type="textarea" autoHeight style="margin-top: 5px;width: 40vh"
						v-model="planForm.reason" placeholder="未完成原因" />
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getPlanListByParams,
		NtJobByPid,
		SyJobByPid,
		changePlanExFlag,
		getSimpleUID,
		getBcResource,
		listByCode,
		queryBcPartyList,
		editUnCompletedReasonNt,
		editUnCompletedReasonSy
	} from '@/api/system/task.js'
	export default {
		data() {
			return {
				viewportHeight: uni.getSystemInfoSync().windowHeight - 45, // 更新视口高度
				viewHeight: uni.getSystemInfoSync().windowHeight / 1.5, // 更新视口高度
				viewWidth: uni.getSystemInfoSync().windowWidth - 20,
				remark: "",
				searchInput: "",
				workCenter: "",
				filteredOptions: [],
				workCenterList: [],
				reasonTypeList: [],
				peopleList: [],
				row: {},
				current: 0,
				planForm: {
					dpId: "",
					dpDate: "",
					reason: "",
					reasonType: "",
					reasonTypeCode: "",
					personResponsible: "",
					personResponsibleName: "",
				},
				tabs: [
					'任务列表',
					'异常任务',
				],
				title: "",
				column1: [{
						name: 'operation',
						type: 'operation',
						label: '操作',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 2,
						renders: [{
							name: '异常',
							class: 'edit',
							type: "primary",
							func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
						}, {
							name: '工艺',
							class: 'edit',
							type: "primary",
							func: 'dele' // func 代表子元素点击的事件 父元素接收的事件 父元素 @dele
						}, {
							name: '详情',
							class: 'edit',
							type: "primary",
							func: 'custom' // func 代表子元素点击的事件 父元素接收的事件 父元素 @custom
						}, {
							name: '备注',
							class: 'edit',
							type: "primary",
							func: 'notes' // func 代表子元素点击的事件 父元素接收的事件 父元素 @notes
						}]
					}, {
						type: 'index',
						label: '序号',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
						align: "center",
					},
					{
						name: 'stutStatename',
						label: '状态',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
						align: "center",
					},
					{
						name: 'jobPriorityname',
						label: '优先级',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
					},
					{
						name: 'mo',
						label: 'MO号',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1.1,
					},
					{
						name: 'jobCode',
						label: '当前工序号',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					},
					{
						name: 'jobName',
						label: '工序名称',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.8,
						align: "center",
					},
					{
						name: 'th',
						label: '图号',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.9,
						align: "center",
					},
					{
						name: 'planNum',
						label: '加工数量',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
						align: "center",
					},
					{
						name: 'logisticsposition',
						label: '当前位置',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
						align: "center",
					},
					{
						name: 'bcDullTime',
						label: '呆滞时长',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
						align: "center",
					},
					{
						name: 'dpDate',
						label: '入库日期',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					},
					{
						name: 'blind',
						label: '盲板',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.4,
					},
					{
						name: 'standardParts',
						label: '标准件',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
					},
					{
						name: 'reasonType',
						label: '原因类型',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
					},
					{
						name: 'personResponsibleName',
						label: '责任人',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
					},
					{
						name: 'reason',
						label: '未完成原因',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
					}
				],
				table1: [],
				column2: [{
						name: 'operation',
						type: 'operation',
						label: '操作',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 2,
						renders: [{
							name: '恢复',
							class: 'edit',
							type: "primary",
							func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
						}, {
							name: '工艺',
							class: 'edit',
							type: "primary",
							func: 'dele' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
						}, {
							name: '详情',
							class: 'edit',
							type: "primary",
							func: 'custom' // func 代表子元素点击的事件 父元素接收的事件 父元素 @custom
						}, {
							name: '备注',
							class: 'edit',
							type: "primary",
							func: 'notes' // func 代表子元素点击的事件 父元素接收的事件 父元素 @notes
						}]
					}, {
						type: 'index',
						label: '序号',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
						align: "center",
					},
					{
						name: 'stutStatename',
						label: '状态',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
						align: "center",
					},
					{
						name: 'jobPriorityname',
						label: '优先级',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
					},
					{
						name: 'mo',
						label: 'MO号',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
					},
					{
						name: 'jobCode',
						label: '当前工序号',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					},
					{
						name: 'jobName',
						label: '工序名称',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					},
					{
						name: 'planNum',
						label: '加工数量',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					},
					{
						name: 'logisticsposition',
						label: '当前位置',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1,
						align: "center",
					},
					{
						name: 'bcDullTime',
						label: '呆滞时长',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
						align: "center",
					},
					{
						name: 'dpDate',
						label: '入库日期',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.75,
						align: "center",
					},
					{
						name: 'remark',
						label: '备注',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					},
					{
						name: 'reasonType',
						label: '原因类型',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.6,
					},
					{
						name: 'personResponsibleName',
						label: '责任人',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.5,
					},
					{
						name: 'reason',
						label: '未完成原因',
						align: "center",
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
					}

				],
				table2: [],
				//工序 状态 工序号 工序名称 计划数量 返修数 报废数
				column3: [{
						type: 'index',
						width: 60,
						label: '序号',
						align: "center",
					},
					{
						name: 'stutStatename',
						label: '状态',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.7,
						align: "center",
					}, {
						name: 'jobCode',
						label: '工序号',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1,
						align: "center",
					}, {
						name: 'jobName',
						label: '工序名称',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1,
						align: "center",
					}, {
						name: 'jobPlannum',
						label: '计划数量',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1,
						align: "center",
					}, {
						name: 'jobRepairnum',
						label: '返修数',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.8,
						align: "center",
					}, {
						name: 'jobScrapnum',
						label: '报废数',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.8,
						align: "center",
					}, {
						name: 'receiveUser',
						label: '接收人',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 0.8,
						align: "center",
					}, {
						name: 'receiveTime',
						label: '接收时间',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1,
						align: "center",
					}, {
						name: 'jobActualstarttime',
						label: '实际开工时间',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1.2,
						align: "center",
					}, {
						name: 'jobActualendtime',
						label: '实际完工时间',
						width: (uni.getSystemInfoSync().windowWidth - 60) / 10 * 1.2,
						align: "center",
					}
				],
				table3: [],
			}
		},
		created() {
			this.getTask1();
			this.getBcResourceList();
			listByCode('TF_DAILY_PLAN.REASON_TYPE').then(res => {
				this.reasonTypeList = res.data
			})
			queryBcPartyList().then(res => {
				let data = [];
				for (var i = 0; i < res.data.length; i++) {
					data.push({
						patyName: res.data[i].patyCode + ' | ' + res.data[i].patyName,
						patyCode: res.data[i].patyCode
					})
				}
				this.peopleList = data
			});
		},
		methods: {
			handleInput(input) {
				this.searchInput = input;
				this.filterOptions();
			},
			filterOptions() {
				if (!this.searchInput) {
					this.filteredOptions = this.peopleList;
					return;
				}
				// 模糊检索逻辑
				const filterRegex = new RegExp(this.searchInput, 'i');
				this.filteredOptions = this.peopleList.filter(option => {
					return filterRegex.test(option.text);
				});
			},
			getnotes(row, index) {
					console.log("-------", row)
				let data = {
					dpId: row.dpId,
					dpDate: row.dpDate,
					reason: row.reason,
					reasonTypeCode: row.reasonTypeCode,
					reasonType: row.reasonType,
					personResponsible: row.personResponsible,
					loginName:this.$store.state.user.userAll.userName,
					loginCode:this.$store.state.user.userAll.userCode,
					dpDb:row.dpDb,
				}
				
				Object.assign(this.planForm, data)
				console.log("-------", this.planForm)
				this.$refs.inputDialogs.open();
			},
			InputConfirm() {
				if (this.planForm.reasonTypeCode) {
					this.planForm.reasonType = this.reasonTypeList.find(item => item.dictCode === this.planForm
						.reasonTypeCode).dictName
				}
				if (this.planForm.personResponsible) {
					this.planForm.personResponsibleName = this.peopleList.find(item => item.patyCode === this.planForm
						.personResponsible).patyName
				}
				console.log("-------", this.planForm)
				if (this.planForm.dpDb === "NT") {
					editUnCompletedReasonNt(this.planForm).then(res => {
						if(res.code==200){
							this.$modal.msgSuccess("保存成功")
							this.getTask1();
							this.$refs.inputDialogs.close();
						}else{
							this.$modal.msgError(`保存失败`)
						}
					})
				}else{
					editUnCompletedReasonSy(this.planForm).then(res => {
						if(res.code==200){
							this.$modal.msgSuccess("保存成功")
							this.getTask1();
							this.$refs.inputDialogs.close();
						}else{
							this.$modal.msgError(`保存失败`)
						}
					})
				}
			},
			InputConfirmClose() {
				this.$refs.inputDialogs.close();
			},
			getBcResourceList() {
				this.workCenterList = [];
				getBcResource().then(res => {
					//console.log(res)
					this.workCenterList = res.data;
				})
			},
			onSelectTask() {
				this.getTask1()
			},
			changetab(index) {
				this.current = index;
				this.getTask1();
			},
			LookPic(ite, index) {
				let data = {
					ite: ite
				}
				uni.navigateTo({
					url: '/pages/task/lookpic?data=' + JSON.stringify(data)
				})
			},
			getTask1() {
				this.table1 = [];
				this.table2 = [];
				console.log("0", this.$store.state.user.userCode, this.workCenter === "" ? this.workCenter : this
					.workCenter.join(","))
				// FC2369
				getPlanListByParams("0", this.$store.state.user.userCode, this.workCenter === "" ? this.workCenter : this
					.workCenter.join(",")).then(res => {
					console.log(res)
					this.table1 = res.data;
					let option = JSON.parse(JSON.stringify(this.tabs))
					if (res.data.length > 0) {
						option[0] = "任务列表" + "(" + res.data.length + ")"
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].jobPriorityname === "特级") {
								res.data[i].jobPriorityname = "OTD"
							}
							if (res.data[i].standardParts === 1) {
								res.data[i].standardParts = "是"
							} else {
								res.data[i].standardParts = "否"
							}
							if (res.data[i].blind === 1) {
								res.data[i].blind = "是"
							} else {
								res.data[i].blind = "否"
							}
						}
						this.tabs = option;
						this.$refs.tabs.update();
					} else {
						option[0] = "任务列表"
						this.tabs = option;
						this.$refs.tabs.update();
					}
				})
				getPlanListByParams("1", this.$store.state.user.userCode, this.workCenter === "" ? this.workCenter : this
					.workCenter.join(",")).then(res => {
					console.log(res)
					this.table2 = res.data;
					let option = JSON.parse(JSON.stringify(this.tabs))
					if (res.data.length > 0) {
						option[1] = "异常任务" + "(" + res.data.length + ")"
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].jobPriorityname === "特级") {
								res.data[i].jobPriorityname = "OTD"
							}
							if (res.data[i].standardParts === 1) {
								res.data[i].standardParts = "是"
							} else {
								res.data[i].standardParts = "否"
							}
							if (res.data[i].blind === 1) {
								res.data[i].blind = "是"
							} else {
								res.data[i].blind = "否"
							}
						}
						this.tabs = option;
						this.$refs.tabs.update();
					} else {
						option[1] = "异常任务"
						this.tabs = option;
						this.$refs.tabs.update();
					}
				})
			},
			EditButton1(ite, index) {
				this.title = "备注";
				this.row = ite
				this.$refs.inputDialog.open();
			},
			EditButton2(ite, index) {
				this.title = "恢复";
				this.row = ite
				this.$refs.inputDialog.open();
			},
			dele(row, index) {
				this.$refs.inputDialog1.open();
				this.table3 = [];
				console.log(row, index)
				if (row.dpDb === "NT") {
					NtJobByPid(row.moId).then(res => {
						this.table3 = res.data
					})
				} else {
					SyJobByPid(row.moId).then(res => {
						// console.log(res)
						this.table3 = res.data
					})
				}
			},
			dialogInputConfirm() {
				// console.log(this.$store.state.user.userAll.userCode, this.$store.state.user.name)
				if (this.title === "恢复") {
					let data = {
						"dpId": this.row.dpId,
						"remark": "",
						"exFlag": "0",
						"remarkPersonCode": this.$store.state.user.userAll.userCode,
						"remarkPersonName": this.$store.state.user.name,
					}
					changePlanExFlag(data).then(res => {
						if (res.code == 200) {
							this.$refs.inputDialog.close();
							this.remark = "";
							this.getTask1();
						} else {
							this.$modal.msgError(`操作失败!`)
						}
					})
				} else {
					let data = {
						"dpId": this.row.dpId,
						"remark": this.remark,
						"exFlag": "1",
						"remarkPersonCode": this.$store.state.user.userAll.userCode,
						"remarkPersonName": this.$store.state.user.name,
					}
					changePlanExFlag(data).then(res => {
						if (res.code == 200) {
							this.$refs.inputDialog.close();
							this.remark = "";
							this.getTask1();
						} else {
							this.$modal.msgError(`操作失败!`)
						}
					})
				}
			},
			dialogInputConfirmClose() {
				this.remark = "";
				this.$refs.inputDialog.close();
				this.$refs.inputDialog1.close();
			},
			cellClick(row, index, column) {
				console.log('点击单元格', row, index, column)
			},
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (column.label === '标准件') {
					let val = row.standardParts
					if (val === "是") {
						return {
							'background-color': '#7ED321',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					} else {
						return {
							'background-color': '#dc3545',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					}
				}
				if (column.label === '盲板') {
					let val = row.blind
					if (val === "是") {
						return {
							'background-color': '#7ED321',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					} else {
						return {
							'background-color': '#dc3545',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					}
				}
				if (column.label === '优先级') {
					let val = row.jobPriorityname
					if (val === 'OTD' || val === '特级') {
						return {
							'background-color': '#dc3545',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					} else if (val === '高级') {
						return {
							'background-color': '#F5A623',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					} else if (val === '中级') {
						return {
							'background-color': '#1E90FF',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					} else {
						return {
							'background-color': '#7ED321',
							color: '#FFFFFF',
							fontWeight: 'bold',
							fontSize: '20'
						};
					}
				}
			},
		}
	}
</script>

<style>
	.selected-task {
		background-color: #fff;
		border-top: 1px solid #dcdfe6;
		border-bottom: 1px solid #dcdfe6;
		height: 75rpx
	}

	.example-body {
		background-color: #fff;
		width: 200px;
	}
</style>